<template>
    <section class="watchSection">
        <layout :isVertical="true">
            <common-toolbar text="故障工单列表">
                <el-button class="btn commonButton" type="default" @click="getShanxuan">筛选</el-button>
                <el-button class="btn commonButton" v-if="!onlyShowError" type="default" @click="searchErrorList">仅查看未解决工单</el-button>
                <el-button class="btn commonButton" v-if="onlyShowError" type="default"  @click="searchAllList">查看全部数据</el-button>
                <el-button class="btn commonButton" type="success" style="background: #67C23A !important;border-color: #67C23A;"  @click="dialogVisiblechange">批量调整工单状态</el-button>
                <el-button class="btn commonButton" v-if="userInfoForm.userName!='admin'" type="success" style="background: rgb(80, 172, 253) !important;border-color: rgb(80, 172, 253);"  @click="dialogVisibleAutoFun">设置自动关单时间</el-button>
            
            </common-toolbar>
             <div>
                <formData ref="componentChild" :conmonDisabled="conmonDisabled" :list='list' @condition="condition" @conmonDisabledNone="conmonDisabledNone"></formData>
            </div>
            <layout layout="center"  class="centerSection noScrollSection">
                <el-table
                        :data="data"
                        v-loading.iTable="loading"
                        :stripe="true"
                        ref="mutipleTable"
                        :height="height"
                        :highlight-current-row="true"
                        border
                        :tree-props="{children: 'children'}"
                        row-key="id"
                        header-row-class-name="tableHeader"
                        tooltip-effect="dark"
                        class="watchTable"
                        style="width: 100%"@selection-change="handleSelectionChange">
                    <el-table-column
                    type="selection"
                    width="55">
                    </el-table-column>
                    <el-table-column
                            label="No."
                            type="index"
                            :index="indexMethod"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            property="businessId"
                            label="工单ID"
                            show-overflow-tooltip="true"
                    >
                    </el-table-column>
                    <el-table-column
                            property="cinemaName"
                            label="影院名称"
                            show-overflow-tooltip="true"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            property="cinemaCode"
                            label="专资编码"
                            width="200">
                    </el-table-column>
                    <el-table-column
                            property="state"
                            label="工单类型">
                             <template slot-scope="scope">
                                 {{getState(scope.row.workOrderType)}}
                            </template>
                    </el-table-column>                    
                    <el-table-column
                            property="createTime"
                            label="创单时间"
                            width="260" >
                        <template slot-scope="scope">
                            <div style="text-align: left;line-height: 30px;height: 30px;">
                                {{scope.row.createTime}}
                            </div>
                            <!-- <div style="text-align: left;line-height: 30px;height: 30px;">
                                {{scope.row.createTime}}
                            </div> -->
                        </template>
                    </el-table-column>
                    <el-table-column
                            property="createUserName"
                            label="创单人">
                    </el-table-column> 
                    <el-table-column
                            property="state"
                            label="工单状态">
                             <template slot-scope="scope">
                                 <span :style="{color:getBackgtound(scope.row.state)}">{{getWorkOrderType(scope.row.state)}}</span>
                                 
                            </template>
                    </el-table-column> 
                    <el-table-column label="操作" width="150">
                       <template slot-scope="scope">
                           <inner-button text="查看详情" @click="showDetail(scope.row)" ></inner-button>
                       </template>
                   </el-table-column>
                </el-table>
                <div class="paginationDiv">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            @current-change="handleCurrentChange"
                            :current-page.sync="page"
                            :page-size="pageSize"
                            :total="total">
                    </el-pagination>
                </div>
            
            </layout>
        </layout>
        <el-dialog
                title="批量调整工单状态"
                :visible.sync="dialogVisible"
                width="30%">
            <div>
                <el-form ref="form" :model="form" label-width="100px">
                   <el-form-item label="调整工单状态">
                    <el-select v-model="form.state" placeholder="请选择工单状态">
                   <el-option
                    v-for="item in user3"
                    :key="item.codeId"
                    :label="item.codeValue"
                    :value="item.codeId">
                    
                    </el-option>
                    </el-select>
                </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer" style="padding:10px;">
                <el-button class="btn commonButton" @click="dialogVisible = false">取 消</el-button>
                <el-button class="btn commonButton" type="default" @click="workOrderUpdateState(form.state)">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="设置自动关单时间（全局）"
                :visible.sync="dialogVisibleAuto"
                width="30%">
            <div style="margin-left:10px;">
                <el-form ref="form" :model="form" label-width="210px">
                   <el-form-item label="调整工自动创单工单将于创单后">
                    <el-select v-model="form.stateAuto" placeholder="请选择故障影厅">
                    <el-option
                        v-for="item in user3Auto"
                        :key="item.codeValue"
                        :label="item.codeValue"
                        :value="item.codeId">
                        
                        </el-option>
                    </el-select>
                    <span>自动关闭。</span>
                </el-form-item>
                </el-form>
                <p style="margin:10px 0;">即：工单状态由 <span style="color:rgb(223, 97, 5)">待响应</span>/<span style="color:rgb(12, 162, 66)">处理中</span>  变为 已处理</p>
                <p style="margin:10px 0;">注意：1. 自动关单时间设置作用于所有系统自动创单工单；</p>
                <p style="margin:10px 0;">2.工单详情页点击<i class="el-icon-setting"></i>可对具体工单设置关单时间，优先级高于此处的全局设置。</p>
                <p style="margin:10px 0;">3. 如需关闭自动关单功能请在下拉菜单中选择【不设置】；</p>
            </div>
            <span slot="footer" class="dialog-footer" style="padding:10px;">
                <el-button class="btn commonButton" @click="dialogVisibleAuto = false">取 消</el-button>
                <el-button class="btn commonButton" type="default" @click="workOrderUpdateAuto(form.stateAuto)">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title=""
                :visible.sync="dialogVisibleAutoName" v-if="dialogVisibleAutoName"  width="70%">
                <workoRderCreatDetails @dialogVisibleAutoClick="dialogVisibleAutoClick" :workoName="workoName"></workoRderCreatDetails>
        </el-dialog>
    </section>
</template>

<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import Service from './showStatusWatch.service';
import {JSEncrypt} from 'jsencrypt';
import base from '@/scrollLoad';
import moment from 'moment';
import formData from '@/views/form/form.vue';
import workoRderCreatDetails from './workoRderCreatDetails.vue';

@Component({components:{
        formData,
        workoRderCreatDetails
    }})
export default class cinemaShowLog extends Vue{
    height = 500;
    windowHeight = 700;
    loading = false;
    data = [];
    onlyShowError = false;
    total = 0;
    page = 1;
    pageSize = 30;
    cinemaName = '';
    cinemaCode = '';
    state = '';
    workOrderType = '';
    startTime = '';
    endTime = '';
    user3=[];
    timer=null;
    userInfoForm={};
    dialogVisibleAutoName=false;
    user3Auto=[
        // {codeLabel:'不设置',codeValue:0},
        // {codeLabel:'15分钟',codeValue:15},
        // {codeLabel:'30分钟',codeValue:30},
        // {codeLabel:'24h（1日）',codeValue:24},
        // {codeLabel:'72h（3日）',codeValue:72},
        // {codeLabel:'120h（5日）',codeValue:120},
        // {codeLabel:'168h（7日）',codeValue:168},
        // {codeLabel:'240h（10日）',codeValue:240},
        // {codeLabel:'360h（15日）',codeValue:360},
        // {codeLabel:'480h（20日）',codeValue:480},
        // {codeLabel:'720h（30日）',codeValue:720},

    ];
    conmonDisabled:boolean=false;
    dialogVisibleAuto=false;
    dialogVisible = false;
    form = {
        name: '',
        code: '',
        date : '',
        stateAuto:'不设置'
    };
    workoName={}
    list:'workoRder';
    multipleSelection=[]
    constructor(){
        super();

    };
     // 序号
    indexMethod(index) {
    return (this.page - 1) * this.pageSize + index + 1;
    }
    searchErrorList(){
        // this.state='1'
        this.page = 1
        this.onlyShowError = true;
        this.searchList();
    }

    searchAllList(){
        this.onlyShowError = false;
        this.searchList();
    }
     handleSelectionChange(val) {
        this.multipleSelection = val;
        // for(let item of val) {
        //     this.multipleSelection.push(item.id)
        // }
      }
      dialogVisiblechange() {
          if(this.multipleSelection.length==0) {
           return this['$message']({
                    message:'请选择工单',
                    type: 'error'
                });
        }
          this.dialogVisible = true
      }
      workOrderUpdateAuto(row) {
          Service.updatePredict(row).then((res) => {
             if(res.data.succeeded){
                 this.dialogVisibleAuto = false
                this.searchList()
            }else{
                this['$message']({
                    message: res.data.errorMessage,
                    type: 'error'
                });
            }
          })
      }
      dialogVisibleAutoClick() {
          this.dialogVisibleAutoName = false;
          this.searchList();
      }
    workOrderUpdateState(state) {
        // if(this.multipleSelection.length==0) {
        //    return  this.$message({
        //         type: 'warning',
        //         message: '工单类型!'
        //       });
        // }
        let ids = []
        for(let item of this.multipleSelection) {
            ids.push(item.id)
        }
        let params = {
            ids: ids,
            state: state
        }
        Service.workOrderUpdateState(params).then(res=>{
            if(res.data.succeeded){
                //  this.data = res.data.data;
                // this.total = res.data.totalRecords;
                this.multipleSelection=[]
                 this.dialogVisible = false
                this.searchList()
            }else{
                this['$message']({
                    message: res.data.errorMessage,
                    type: 'error'
                });
            }
        })
    }
    codeListByType() {
            let state = 'state'
            Service.codeListByType(state).then(res=>{
               if(res.data.succeeded){
                    this.user3 = res.data.data
                }else{
                    this['$message']({
                        message: res.data.errorMessage,
                        type: 'error'
                    });
                }
            })
        }
        codeListbyTypeList() {
            Service.codeListbyTypeList('predictTime').then(res=>{
               if(res.data.succeeded){
                    this.user3Auto = res.data.data
                }else{
                    this['$message']({
                        message: res.data.errorMessage,
                        type: 'error'
                    });
                }
            })
        }
        dialogVisibleAutoFun() {
            Service.selectPredict().then((res) => {
                if(res.data.succeeded){
                   this.form.stateAuto = res.data.data.hourNum;
                    
                }
        
            })
            this.dialogVisibleAuto = true;
        }
    searchList(){
        this.loading=true;
        let params = {
            pageNum: this.page,
            pageSize: this.pageSize,
            cinemaName: this.cinemaName,
            cinemaCode: this.cinemaCode,
            state:this.state,
            exception:this.onlyShowError,
            workOrderType:this.workOrderType,
            startTime:this.startTime==''? '' : moment(this.startTime).format('YYYY-MM-DD HH:mm:ss'),
            endTime:this.endTime==''? '' :moment(this.endTime).format('YYYY-MM-DD HH:mm:ss')
        }
        //console.log(params)

        this.data = [];
         Service.workOrderList(params).then(res=>{
            if(res.data.succeeded){
                this.loading=false;
                this.data = res.data.data;
                this.total = res.data.totalRecords;
                this.state=''
            }else{
                this['$message']({
                    message: res.data.errorMessage,
                    type: 'error'
                });
                this.loading=false;
            }
        })
    }
    getBackgtound(row) {
           if (row == 3) {
                return 'orange'
            } else if(row == 1) {
                return 'green';
            } else {
                return '#000'
            }
        }
    getWorkOrderType(row) {
        if(row == 1) {
            return '处理中';
        } else if (row == 2) {
            return '已处理  ';
        }else if (row ==3) {
            return '待响应';
        }else if (row == 4) {
            return '挂单';
        }
    }
    getState(row) {
        if(row == 1) {
            return '人工创单';
        } else if (row == 2) {
            return '自动创单';
        }
    }
    handleSizeChange(val) {
        this.pageSize = val;
        this.searchList();
    }

    handleCurrentChange(val) {
        this.page = val;
        this.searchList();
    }

    showDetail(row){
        //  let params = {
        //         id: row.id
        //     };
            window.localStorage.setItem('workoRderCreatDetails',JSON.stringify(row))
            this.workoName = row
            this.dialogVisibleAutoName = true;
            // this.$router.push({
            //     path:'/watch/workoRderCreatDetails',
            //     name:'工单详情',
            //     params:params
            // })
    }

    dateFormat(date){
        return moment(date).format("YYYY-MM-DD,H:m:s");
    }

    resizeEvent(){
        this.windowHeight = document.documentElement.clientHeight;
        this.height = this.windowHeight - 210;
    }
        getShanxuan() {
            // debugger
            this.$refs.componentChild.getShow();
            this.conmonDisabled = true;
            this.list = 'workoRder'
            this.windowHeight = document.documentElement.clientHeight;
            this.height = this.windowHeight - 210 - 95;
        }
        condition(data) {
            this.page = 1
            //console.log(data)
            this.cinemaName = data.user
            this.cinemaCode = data.user1
            this.state = data.user3
            this.workOrderType = data.user2
            this.startTime =(data.user4==null||data.user4.length==0)?'':moment(data.user4[0]).format('YYYY-MM-DD HH:mm:ss')
            this.endTime = (data.user4==null||data.user4.length==0)?'':moment(data.user4[1]).format('YYYY-MM-DD HH:mm:ss')

            this.searchList()

            // this.windowHeight = document.documentElement.clientHeight;
            // this.height = this.windowHeight - 210 + 80;
        }
        conmonDisabledNone(conmonDisabled) {
            
            this.conmonDisabled = false;
            this.cinemaName = conmonDisabled.user;
            this.cinemaCode = conmonDisabled.user1;
            this.state = conmonDisabled.user3;
            this.workOrderType = conmonDisabled.user2;
             this.startTime = ''
            this.endTime =''
            this.windowHeight = document.documentElement.clientHeight;
            this.height = this.windowHeight - 210;
            this.searchList();
        }
        
    created(){
        let userInfoForm = JSON.parse(window.sessionStorage.getItem('userInfoForm'));
        this.userInfoForm = userInfoForm
        const me = this;
        //console.log(this.$route)
        if(this.$route!=undefined) {
            this.exception = this.$route.params.exception
        }
        this.resizeEvent();
        this.searchList();
        this.codeListByType();
        this.codeListbyTypeList();
        window.onresize = () => {
            return (() => {
                me.resizeEvent();
            })()
        };
    };
    mounted(){
        //console.log(this.$route.params.userId)
        if(this.$route.params.userId == 123) {
            this.getShanxuan()
        }
        // this.timer = setInterval(() => {
        //         this.searchList();
        //     }, 6000);
    
            // me.$nextTick(()=>{
            //     me.getBaiduMap().then(BMap => {
            //         me.showMap()
            //     })
            // })
            
    };
    beforeDestroy() {
        clearInterval(this.timer);
        this.timer = null;
    };
    deactivated() {
        clearInterval(this.timer);
        this.timer = null;
    };

}
</script>
<style lang="scss" scoped>
    @import '../../styles/login.scss';

</style>